<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	<style type="text/css">
		.info-list-item {
			display: flex;
			background-color: #fff;
		}
		
		.item-label{
			font-size: 15px;
			color: gray;
			text-align: center;
			padding-top: 3px;
			padding-bottom: 3px;
		}
		
		.newsTableDiv {
			margin-bottom: 4px;
			padding: 0px 4px;
		}
		.card {
			margin: 0px 0px;
		}
		.info-list-item +.info-list-item{
			margin-top: 2px;
		}
		.itemTop{
			display: flex;
			justify-content: space-between;
		}
        .container {
          display: flex;
        }
         
        .left {
          width: 70%;
          margin-left: 10px;
          align-items: center;
          margin-top: 10px;
        }
         
        .right {
          margin-left: 10px;
          margin-right: 10px;
          align-items: center;
          font-size: 13px;
          height: 100%;
        }
        
        .cardCourseTitle {
            box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
            padding-left: 5px;
            padding-right: 5px;
            border-radius: 5px;
            border: 1px solid orange;
            color: orange;
            font-size: 13px;
        }
        
        .cardCourseTitle2 {
            box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 5px;
            border: 1px solid rgb(230,205,169,1);
            color: rgb(113,96,59,1);
            background-color: rgb(250,240,209,1);
            font-size: 13px;
        }
        
        .cardCourseTitle3 {
            box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 15px;
            border: 1px solid rgb(230,205,169,1);
            font-size: 13px;
        }
        
        .cardCourse {
            margin:10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            border:1px solid rgb(230,205,169,1);
            width: inherit; /* 卡片宽度 */
        }
         
        .cardCourse-content {
          padding: 10px; /* 内容间距 */
        }
        
        
        /* 为具有特定类的label添加背景渐变 */
        .bg-gradient {
          background-image: linear-gradient(to right, rgb(242,234,202,0.5) 0%, rgb(238,157,64,1) 100%);
          background-size: 100% 100%;
          border-top-left-radius: 7px;
          border-top-right-radius: 7px;
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
        }
        
        .progress-container {
          width: 75%;
          height: 4px;
          margin-top: 5px;
          background-color: gray;
          border-radius: 2px;
          overflow: hidden;
          align-items: center;
        }
         
        .progress-bar {
          height: 4px;
          background-color: orange;
          transition: width 1s ease-in-out;
          border-radius: 2px;
          width: 0; /* 默认情况下进度条为0 */
        }
        
	</style>
	<body>
		<div id="app">
			<div id="table" class="card">
                <div v-for="(item,index) in examList" class="trainingItem" style="padding-bottom: 10px;" @click.stop="toFileList(index)">
                    <div class="container">
                        <div class="left">
                            <div class="container">
                                <div class="cardCourseTitle">课程{{item.courseHour}}</div>
                                <div style="margin-left: 10px;">{{item.courseName}}</div>
                            </div>
                            <div class="container" style="margin-top: 10px;">
                                <div class="progress-container">
                                  <div class="progress-bar" :style="{'width':item.progressVal}"></div>
                                </div>
                                <div style="font-size: 12px;margin-left:10px;">{{item.learnTime | secondsToMinutes}}分/{{item.standardHour}}分</div>
                            </div>
                        </div>
                        <div class="right" style="height:inherit;display: flex;align-items: center; ">
                            <div class="cardCourseTitle3" :style="{'color':item.color,'background-color':item.backColor}">{{ item.typeName }}</div>
                        </div>
                    </div>
					
				</div>
			</div>
            <div class="cardCourse">
                <div class="bg-gradient">
                    <div style="margin-left: 10px;color: rgb(113,96,59,1)">考试练习区</div>
                </div>
                <div class="cardCourse-content">
                    <div class="container">
                        <div style="width: 85%;">
                            <div class="container">
                                <div class="cardCourseTitle2" @click.stop="toOnlineExam()">考试</div>
                                <div style="margin-left: 10px;"> {{ examInfo.examName }}</div>
                            </div>
                            <div class="container" style="margin-top: 10px;">
                                <div class="cardCourseTitle2" @click.stop="toOnlineExamTest()">练习</div>
                                <div style="margin-left: 10px;"> {{ examInfo.examName }}</div>
                            </div>
                        </div>
                        <div class="right" style="height:inherit;display: flex;align-items: center; ">
                            {{ examInfo.examStatusName }}
                        </div>
                    </div>
                    
                </div>
            </div>
		</div>
        
	</body>
	<script type="text/javascript">
		var app = new Vue({	
			el: '#app',
			data:{
				examList: [
				],
                examTrain: {
                    
                }
			},
			filters:{
				formatTime(val){
					if (val == null) {
						return ""
					}
					return moment(val).format("YYYY-MM-DD")
				},
                secondsToMinutes(val) {
                    if (val == null) {
                        return ""
                    }
                  return Math.floor(val / 60); // 返回格式化字符串
                }
                 
			},
			created() {
				window.getExamList = this.getExamList
                window.clear = this.clear
                const progressBar = document.querySelector('.progress-bar');
                progressBar.style.width = exam.progressVal
			},
			methods:{
              getExamList (examList,examInfo){
                  if(examInfo.examStatus == 0){
                      examInfo.examStatusName = "未考试";
                  }else if(examInfo.examStatus == 99){
                      examInfo.examStatusName = "已考";
                  }
                  this.examInfo = examInfo
                  for(var i = 0;i<examList.length;i++){
                      var exam = examList[i]
                      if(exam.learnTime >= (exam.standardHour * 60) ){
                          exam.color = "white"
                          exam.backColor = "orange"
                          exam.typeName = "已达标"
                      }else {
                          exam.color = "gray"
                          exam.backColor = "rgb(250,240,209,1)"
                          exam.typeName = "未达标"
                      }
                      
                      if(exam.learnTime >= (exam.standardHour * 60) ){
                          exam.progressVal = "100%"
                      }else {
                          exam.progressVal = (exam.learnTime / (exam.standardHour* 60) )*100 + "%"
                      }
                  }
                this.examList = this.examList.concat(examList)
              },
              clear () {
                  this.examList = []
                  this.examInfo = {}
              },
              toFileList (index){
                    var exam = this.examList[index]
                    let params = {
                          fileList:exam.courseFile
                     }
                    WebViewJavascriptBridge.callHandler('toFileList',params);
              },
              toOnlineExam (){
                    var exam = this.examInfo
                    var exams = this.examList
                    for(var i = 0;i<exams.length;i++){
                        var e = exams[i]
                        if(e.learnTime >= (e.standardHour * 60) ){
                            
                        }else {
                            let params = {
                              exam:JSON.stringify(e)
                         }
                            WebViewJavascriptBridge.callHandler('toShowError',params);
                            return;
                        }
                    }
                    if(exam.examStatus != 99 ){
                        let params = {
                              exam:JSON.stringify(exam)
                         }
                        WebViewJavascriptBridge.callHandler('toOnlineExamComfirm',params);
                        
                    }else {
                        let params = {
                            onlineExamUserId:exam.onlineExamUserId
                        }
                        WebViewJavascriptBridge.callHandler('toResultList',params);
                    }
              },
              toOnlineExamTest (){
                  var exam = this.examInfo
                  if(exam.examStatus != 99 ){
                        var exams = this.examList
                        let params = {
                              exam:JSON.stringify(exam)
                         }
                      WebViewJavascriptBridge.callHandler('toOnlineExamTest',params);
                  }else {
                      let params = {
                          onlineExamUserId:exam.onlineExamUserId
                      }
                      WebViewJavascriptBridge.callHandler('toShowErrorTest',params);
                  }
                
              }
			}
		})	
	</script>
</html>
